<template>
  <view class="waterfall">
    <view class="slider">
      <view v-for="item in modelValue" :key="item.id" class="slider-item" @click="handleClick(item)">
        <wd-img width="342rpx" height="342rpx" radius="10rpx" :src="item.cover" />
        <view class="content">
          <view class="intro line-clamp-2">
            {{ item.content }}
          </view>
          <view class="price">
            <view><text>￥</text>{{ formatMoney(item.price) }}</view>
            <view class="num">
              月销{{ item.sell_num }}件
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { formatMoney } from '@/utils'

withDefaults(defineProps<{
  modelValue: any
}>(), {
  modelValue: [],
})
const emit = defineEmits(['m-change'])
function handleClick(item: any) {
  emit('m-change', item)
}
</script>

<style lang="scss">
.waterfall {
  .title {
    font-size: 33rpx;
    color: #071110;
    margin-bottom: 21rpx;
  }
  .slider {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .slider-item {
    background: #fff;
    box-shadow: 0 6rpx 13rpx 0 rgba(0, 0, 0, 0.05);
    border-radius: 16rpx;
    width: 342rpx;
    margin-top: 14rpx;
    .content {
      padding: 0 12rpx;
    }
    .intro {
      font-size: 23rpx;
      margin: 15rpx 0 8rpx;
    }
    .price {
      font-size: 30rpx;
      color: #eb0e26;
      font-weight: bold;
      margin-bottom: 10rpx;
      display: flex;
      justify-content: space-between;
      text {
        font-size: 22rpx;
      }
      .num {
        color: #c8c7cc;
        font-size: 20rpx;
      }
    }
  }
}
</style>
